<template>
	<label class="h-radio">
		<span class="h-radio-container">
			<input type="radio" :name="name" :checked="value===label" :value="label" @change="changeRadio"/>
			<span>{{ text || label }}</span>
		</span>
	</label>
</template>

<script>
	export default {
		name: "Radio",
		props: {
			name: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			value: {
				type: [String, Number]
			},
			label: {
				type: [String, Number]
			}
		},
		methods: {
			changeRadio() {
				this.$emit('input', this.label);
				this.$emit('change', this.label);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/css/_function';

	.h-radio {
		display: inline-block;
		margin-right: pr(30);
		margin-top: pr(30);
		.h-radio-container {
			display: inline-flex;
			align-items: center;
			input {
				opacity: 0;
				width: 0;
				&:checked + span {
					color: #b6272d;
					border-color: #b6272d;
				}
			}
			span {
				padding: pr(20) pr(40);
				font-size: pr(34);
				border: 1px solid #d9d9d9;
				border-radius: pr(10);
				position: relative;
			}
		}
	}
</style>
